<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            <span> 整体控制图层显示或隐藏 ： </span>
            <i-switch v-model="show_Element" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>
            <br><br>
            <span>单独控制元素显示或隐藏</span>
            <br><br>
            <div class="itemBox">
                <label>折线(直线) ：</label>
                <i-switch v-model="elementStatus.polyline" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
            <div class="itemBox">
                <label>折线(虚线) ：</label>
                <i-switch v-model="elementStatus.polyline_dash" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
            <div class="itemBox">
                <label>折线(箭头) ：</label>
                <i-switch v-model="elementStatus.polyline_arrow" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
            <div class="itemBox">
                <label>圆形 ：</label>
                <i-switch v-model="elementStatus.circle" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
            <div class="itemBox">
                <label>矩形 ：</label>
                <i-switch v-model="elementStatus.rectangle" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
            <div class="itemBox">
                <label>多边形 ：</label>
                <i-switch v-model="elementStatus.polygon" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
            <div class="itemBox">
                <label>扇形 ：</label>
                <i-switch v-model="elementStatus.sector" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
            <div class="itemBox">
                <label>文字 ：</label>
                <i-switch v-model="elementStatus.label" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
var _Element = null;

export default {
    data() {
        return {
            type: '深色',
            show_Element: true,
            SenceMode: '2D',
            elementStatus: {
                polyline: true,
                polyline_dash: true,
                polyline_arrow: true,
                circle: true,
                rectangle: true,
                polygon: true,
                sector: true,
                label: true,
            },
        }
    },
    watch: {
        show_Element(newValue) {
            // 控制元素图层显示和隐藏
            _Element && (_Element.show = newValue);
        },
        elementStatus: {
            deep: true,
            handler(value) {
                // 此处控制开关，为了防止 Entity对象被 vue 污染，
                // 故使用 GetMappingById 获取元素数据
                for (const key in value) {
                    const element = value[key];
                    var Entity = _Element.GetMappingById(key);
                    Entity && (Entity.show = element);
                }
            }
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);

        map.flytochina();
        // 创建元素图形图层
        _Element = new simpleMap.ElementDataSource(map);

        // // 创建折线元素
        _Element.add('polyline', {
            id: 'polyline',
            points: [{ longitude: 115.0, latitude: 37.0 }, { longitude: 100, latitude: 38 }, { longitude: 100, latitude: 30 }],
            color: 'RED', // 颜色
            width: 5 // 宽度
        })
        // 创建折线元素(虚线)
        _Element.add('polyline', {
            id: 'polyline_dash',
            lineType: 'dash',
            dashLength: 16,
            points: [{ longitude: 114.0, latitude: 36.0 }, { longitude: 99, latitude: 37 }, { longitude: 99, latitude: 29 }],
            color: 'RED', // 颜色
            width: 5 // 宽度
        })

        // 创建折线元素(箭头)
        _Element.add('polyline', {
            id: 'polyline_arrow',
            lineType: 'arrow',
            points: [{ longitude: 113.0, latitude: 35.0 }, { longitude: 98, latitude: 36 }, { longitude: 98, latitude: 27 }],
            color: 'RED', // 颜色
            width: 10 // 宽度
        })

        // 创建圆形元素
        _Element.add('circle', {
            id: 'circle',
            radius: 200000, // 半径
            point: { longitude: 115.0, latitude: 37.0 }, // 圆心点
            color: '#DD00DDCC', // 颜色
            name: {
                color: '#FFF',  // 文字颜色
                text: 'AAA', // 文字内容
                background: '#DD00DD', // 文字背景
            }
        });

        //  创建矩形元素
        _Element.add('rectangle', {
            id: 'rectangle',
            points: [{ longitude: 117.0, latitude: 40.0 }, { longitude: 120, latitude: 38 }], // 坐标点，左上角/右下角（西北角，东南角）
            color: '#DD00DDCC', // 颜色
        });

        // 创建多边形元素
        _Element.add('polygon', {
            id: 'polygon',
            points: [{ longitude: 110.0, latitude: 30.0 }, { longitude: 105, latitude: 35 }, { longitude: 102, latitude: 30 }, { longitude: 107, latitude: 32 }],
            color: '#DD00DDCC', // 颜色
        });

        // 创建扇形元素
        _Element.add('sector', {
            id: 'sector',
            point: { longitude: 110.0, latitude: 30.0 },
            radius: 200000,
            starAngle: 40,
            endAngle: 120,
            color: '#DD00DDCC', // 颜色
        });

        // 创建文字元素
        _Element.add('label', {
            id: 'label',
            point: { longitude: 110.0, latitude: 30.0 }, // 文字中心单
            text: 'AAAAAA',// 文字内容
            color: '#FFFFFF',// 文字颜色
            BGColor: '#DD00DDCC',// 文字背景
        });

    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        }
    },
    beforeDestroy() {
        // 不需要注销地图时，可单独注销图层
        _Element && _Element.Destroy();
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>